<template>
  <el-main>
	<div class="icon">
	    <swiper :options="swiperOption">
	      <swiper-slide v-for="(page, index) of pages" :key="index">
		   <a href="javascript:void(0);" v-for="item of page" :key="item.id">
		    <div class="container">
		     <img :src="item.imgUrl" />
		    </div><span class="title">{{item.name}}</span>
		   </a>
	      </swiper-slide>
	      <div class="swiper-pagination"  slot="pagination"></div>
	    </swiper>
  	</div>

  </el-main>
</template>
<script>
export default{
	name:'HomeBanner',
	props: {
		list: Array
	},
	data () {
		return {
			swiperOption: {
				pagination: '.swiper-pagination',
				autoplay: false
			},			
		}
	},
	computed: {
		pages () {
			const pages =[]
			this.list.forEach((item,index) => {
				const page = Math.floor(index/10)
				if(!pages[page]){
					pages[page]=[]
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
// 更改轮播的样式时要使用>>>样式穿透
</script>
<style lang="stylus" scoped>
.icon >>> .swiper-pagination-bullet {
    width: 14px;
    height: 2px;
    border-radius: 0;
}
.swiper-pagination{bottom:0;}
.container 
    margin-bottom: 8px;
.icon a
	width:20%;
	float:left;
	display:block;
	margin-bottom:14px;
	text-align:center;
.icon a img
	width:100%;
</style>